<template>
	<w-container id="master-rank" class="ptb-12">
		<w-navbar leftIcon="back-btn-white" bgColor="#03031D" :titleStyle="{color:'white'}" title="大师动态"
			:placeholder="true"></w-navbar>
		<view class="plr-16">
			<u-steps direction="column" dot>
				<u-steps-item v-for="item in list">
					<view class="" slot='desc'>
						<view class="flex flex-ai-center">
							<u-avatar size='64rpx' :src="item.avatar"></u-avatar>
							<text class="font-color-white font-size-16 pl-8  text-overflow"
								style="flex:1 0;">{{item.nickname}}</text>
							<text class="font-color-describe font-size-12">{{item.createtime|formatDate}}</text>
						</view>
						<view class="ptb-8 plr-12 mt-10 br-8 font-size-14 font-color-white flex flex-ai-center"
							style="background-color:#601A1A ;">
							<w-image :src="item.goods_cover_image" radius="4" width='45'
								height="45"></w-image>
							<view class="flex flex-dir-col flex-js-sb pl-10 flex-1">
								<text class="  text-overflow" style="flex:1 0;">{{item.goods_name}}</text>
								<text>x{{item.num}}</text>
							</view>
							<w-button size="ss" type="primary" shape="circle" @click='toBuy(item)'>去购买</w-button>
						</view>
					</view>
				</u-steps-item>
			</u-steps>
		</view>
	</w-container>
</template>

<script>
	import {
		getMasterRank,
		setClickNum
	} from '@/api/common/index.js'
	export default {
		data() {
			return {
				page: 1,
				list: [],
				loading: false
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.loading) return;
			this.page++
			this.getList()
		},
		methods: {
			toBuy({batch_order,c_goods_id}){
				setClickNum(batch_order).then(res=>{
					uni.navigateTo({
						url:'/pages/market/marketGoodsList?id='+c_goods_id
					})
				})
			},
			getList() {
				if (this.loading) return;
				this.loading = true;
				getMasterRank({
					page: this.page
				}).then(res => {
					this.list = this.list.concat(res.data)
				}).finally(e => {
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-steps-item__wrapper {
		background-color: unset;
	}

	/deep/ .u-steps-item__line {
		background-color: white !important;
	}

	/deep/ .u-steps-item__wrapper__dot {
		background-color: white !important;
	}

	/deep/ .u-steps-item__line--column {
		top: 20rpx;
	}

	#master-rank {
		background-color: #03031D;

	}
</style>